import React from 'react'
import {connect} from 'react-redux'
// layout
import TabsWithGoBackLayout from "../../layouts/TabsWithGoBackLayout/TabsWithGoBackLayout"

// antd-mobile
import {Badge} from 'antd-mobile'

// components
import Notice from "./Notice/Notice"
import Message from "./Message/Message"

// stylesheet
import './msg.css'
import LocalStorageService from "../../utils/LocalStorageService";


class MessageContainer extends React.Component {

    constructor(props) {
        super(props)
        this.uid = LocalStorageService.get('userid')
        this.isLogin = LocalStorageService.get('isLogin')
    }

    componentDidMount() {

        const isLogin = this.isLogin

        if (isLogin) {
            // this.props.doFetchMsgState({uid,})
        }

    }

    render() {

        const {history, msg,} = this.props
        const {msgState,} = msg

        const tabs = [
            {title: <Badge dot={msgState[0] > 0}>通知</Badge>},
            // {title: <Badge dot={false}>公告</Badge>},
            // {title: <Badge dot={msgState[1] > 0}>情报</Badge>},
            {title: <Badge dot={msgState[2] > 0}>消息</Badge>},
        ]

        return (
            <TabsWithGoBackLayout
                tabs={tabs}
                history={history}
                prefixCls='msg-tab'
                prerenderingSiblingsNumber={0}
                destroyInactiveTab={true}
                tabBarUnderlineStyle={{border: '2px #36C8B9 solid'}}
            >
                <Notice/>
                {/*<Information/>*/}
                <Message/>
            </TabsWithGoBackLayout>
        )
    }

}
const mapState = state => ({
    user: state.user,
    msg: state.msg,
})

const mapDispatch = dispatch => ({
    doFetchMsgState: (payload) => dispatch.msg.doFetchMsgState(payload),
    doFetchMsg: (payload) => dispatch.msg.doFetchMsg(payload),
})



export default connect(mapState, mapDispatch)(MessageContainer)
